<template>
  <div>
    <template>
      <el-upload
        :on-preview="preview"
        :on-remove="handleRemove"
        :on-change="changeFile"
        :before-upload="beforeUpload"
        :file-list="fileList"
        list-type="picture-card"
        action="#"
        :limit="1"
        :class="{ disabled: fileComputed }"
        :http-request="upload"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible" class="img-dialog">
        <img width="100%" height="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
      <el-progress
        v-if="progressShow"
        :percentage="percentage"
        style="width:180px"
      />
    </template>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDsa1iEVWLvGLBl7E5h39zZtynOjodBTWK',
  SecretKey: 'auzpRowpSr0xe5HEvNaXEhushHbeQwBk'
})
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      currentFileUid: '',
      percentage: 0,
      progressShow: false
    }
  },
  computed: {
    fileComputed() {
      return this.fileList.length >= 1
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    preview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    changeFile(file, fileList) {
      this.fileList = fileList.map(item => item)
    },
    handleRemove(file) {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    beforeUpload(file) {
      const type = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!type.includes(file.type)) {
        this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
        return false
      }
      const maxSize = 5 * 1024 * 1024
      if (maxSize < file.size) {
        this.$message.error('图片大小最大不能超过5M')
        return false
      }
      this.currentFileUid = file.uid
      this.progressShow = true
      return true
    },
    upload(params) {
      console.log(params)
      if (params.file) {
        cos.putObject(
          {
            Bucket: 'storage-back-manage-1308044725' /* 必须 */,
            Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
            Key: params.file.name,
            Body: params.file,
            StorageClass: 'STANDARD',
            onProgress: params => {
              this.percentage = params.percent * 100
              console.log(this.percentage)
            }
          },
          (err, data) => {
            console.log('腾讯云返回结果', err || data)
            if (!err && data.statusCode === 200) {
              this.fileList = this.fileList.map(item => {
                if (item.uid === this.currentFileUid) {
                  return {
                    url: 'http://' + data.Location,
                    upload: true
                  }
                }
                return item
              })
              setTimeout(() => {
                this.progressShow = false
                this.percentage = 0
              }, 1000)
            }
          }
        )
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__headerbtn {
  top: 8px !important;
}
.disabled ::v-deep .el-upload--picture-card {
  display: none;
}
</style>
